<template>
        <div class="zxyA">
            <el-card>
          <div style="padding-top:10px;padding-bottom:10px;">
            <el-link :underline="false" @click="gotoPCFS()">←返回个人中心</el-link>
          </div>
          <div style="font-size: 24px; color: #000000">修改个人信息</div>
          <el-divider></el-divider>
          <el-tabs tab-position="left">
            <el-tab-pane label="修改用户名">
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputUserName" placeholder="请输入新的用户名">
                        <template #append>
                            <el-button @click="modifyUserName()">确认修改</el-button>
                        </template>
                    </el-input>
                </div>    
            </el-tab-pane>
            <el-tab-pane label="修改绑定邮箱">
              <!-- <div v-if="$store.getters.codeTimeA==0"> -->
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-button @click="sendCode()" type="info">向原邮箱发送验证码</el-button>
                </div>
              <!-- </div>
              <div v-else>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-button @click="sendCode()" type="info" disabled>向原邮箱发送验证码</el-button>
                </div>
              </div> -->
                
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputEmail" placeholder="请输入新的绑定邮箱"></el-input>
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputCode" placeholder="请输入验证码">
                        <template #append>
                            <el-button @click="modifyEmail()">确认修改</el-button>
                        </template>
                    </el-input>
                </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码">
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputPwdA" placeholder="请输入原密码" show-password/>
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputPwdB" placeholder="请输入新密码" show-password/>
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputPwdC" placeholder="请再次输入新密码" show-password>
                        <template #append>
                            <el-button @click="modifyPwd()">确认修改</el-button>
                        </template>
                    </el-input>
                </div>
            </el-tab-pane>
        </el-tabs>
        </el-card>
        </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {Edit} from "@element-plus/icons";
import logo from "../assets/no_border.png";
import axios from "axios";
import qs from 'qs';
export default defineComponent({
  setup() {
    const state = reactive({
      logo,
      Edit,
      inputUserName:'',
      inputEmail:'',
      inputCode:'',
      inputPwdA:'',
      inputPwdB:'',
      inputPwdC:'',
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    gotoPCFS(){
      this.$router.push("/personalcenterforsee");
    },
    modifyUserName(){
        let dataA={
            userID:this.$store.getters.userID,
            newName:this.inputUserName
        }
        let data=qs.stringify(dataA)
        axios.post("changeUserName/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$store.commit("updateUserName", this.inputUserName);
              this.$message({ message: '修改用户名成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
          
      });
    },
    sendCode(){
        let dataA={
            userID:this.$store.getters.userID,
            newemail:'ceshiyouxiang@zxy.com',
            authCode:'sendCode'
        }
        let data=qs.stringify(dataA)
        axios.post("changeEmail/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$message({ message: '发送验证码成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
    modifyEmail(){
        let dataA={
            userID:this.$store.getters.userID,
            newemail:this.inputEmail,
            authCode:this.inputCode
        }
        let data=qs.stringify(dataA)
        axios.post("changeEmail/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$store.commit("updateUserEmail", this.inputEmail);
              this.$message({ message: '修改绑定邮箱成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
    modifyPwd(){
        let dataA={
            userID:this.$store.getters.userID,
            oldpassword:this.inputPwdA,
            newpassword1:this.inputPwdB,
            newpassword2:this.inputPwdC
        }
        let data=qs.stringify(dataA)
        axios.post("changePwd/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$message({ message: '修改密码成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
  },
});
</script>


<style scoped>
.zxyA {
  margin-top: 30px;
  width: 800px;
  position: absolute;
  left: calc(50% - 400px);
  text-align: left;
}

</style>